<template>
  <div class="h-full w-full">
    <Top></Top>
    <a-layout class="px-[10px] pt-[10px]">
      <Mnues v-model="selectedMenu" :list="list"></Mnues>
      <a-layout-content class="mt-[10px] bg-[#fff] p-[20px]">
        <Password ref="PasswordRef" v-if="selectedMenu == 1" />
        <Info ref="InfoRef" v-else-if="selectedMenu == 3" />
        <Account ref="AccountRef" v-else />
      </a-layout-content>
      <a-layout-footer
      v-if="selectedMenu != 2"
        style="
          background-color: #fff;
          box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.04);
          margin: 0 -10px -10px -10px;
          text-align: center;
        "
      >
        <a-button class="mr-[12px]" @click="cancel">重置</a-button>
        <a-button type="primary" @click="confirm"> 保存</a-button>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script lang="ts" setup>
import Top from "@/components/workHearder/index.vue";
import Mnues from "@/components/menus/index.vue";
import infoImg from "@/assets/img/work/info.png";
import account from "@/assets/img/work/account.png";
import password from "@/assets/img/work/password.png";

import Info from "./info/index.vue";
import Password from "./password/index.vue";
import Account from "./account/index.vue";
import { watch } from "vue";
import { useCurrentMenuStore } from "../../../stores/menuStore";
import { useRoute } from "vue-router";

const PasswordRef = ref(null);
const InfoRef = ref(null);
const AccountRef = ref(null);

const list = [
  {
    key: 1,
    name: "修改密码",
    img: password,
  },
  {
    key: 2,
    name: "账号信息维护",
    img: account,
  },
  {
    key: 3,
    name: "身份信息维护",
    img: infoImg,
  },
];

const selectedMenu = ref(1);

const confirm = async () => {
  if (selectedMenu.value == 1) {
    console.log('PasswordRef.value.confirm()')
    PasswordRef.value.confirm();
  }
  if (selectedMenu.value == 2) {
    AccountRef.value.confirm();
  }
  if (selectedMenu.value == 3) {
    InfoRef.value.confirm();
  }
};

const cancel = () => {
  if (selectedMenu.value == 1) {
    PasswordRef.value.cancel();
  }
  if (selectedMenu.value == 2) {
    AccountRef.value.cancel();
  }
  if (selectedMenu.value == 3) {
    InfoRef.value.cancel();
  }
};
const store = useCurrentMenuStore();
const route = useRoute()

if(route?.query?.key){
  store.changeCurrentTitle(list?.find((p) => p?.key == route?.query?.key)?.name, route?.query?.key);
}


</script>

<style lang="scss" scoped>
:deep(.ant-layout-header) {
  padding-inline: 20px !important;
}
</style>
